<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="__CSS__/layui.css">
    <link rel="stylesheet" href="__CSS__/common.css"/>
</head>
<body>
<script type="text/javascript" src='__JS__/jquery.min.js'></script>
<script type="text/javascript" src='__JS__/layui.js'></script>

<div class="header">
    <div class="container">
        <div class="logo">
            <img src="__IMG__/logo.png" alt="">
        </div>
        <div class="tool">
            <div class="breadcrumb">
                <div class="Weather">
                    <iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&amp;id=12&amp;icon=1&amp;num=5"> </iframe>
                </div>
                <div class="Calendar" style=""><b><img src="__IMG__/Calendar.png"></b>
                   <div id="date">17年3月14日</div><font color="#f85455">星期<span id="wk">二</span></font>&nbsp;<span id="clk">2:13</span><br>农历<span id="nongli">二月十七</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="nav bule">
    <div class="container bule">
        <ul class="layui-nav bule" lay-filter="">
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/home.png" alt="">
                    </i>
                    <span>首页</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/examine.png" alt="">
                        <small>1</small>
                    </i>
                    <span>审批收件</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/face.png" alt="">
                        <small>2</small>
                    </i>
                    <span>审批进度</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/flie.png" alt="">
                        <small>23</small>
                    </i>
                    <span>历史订单</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/folder.png" alt="">
                    </i>
                    <span>文件夹</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/tender.png" alt="">
                        <small>12</small>
                    </i>
                    <span>竞标</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<div class="left-slide">
    <ul>
        <li>
            <a class="con">
                <p>
                    <i class="layui-icon">&#xe62d;</i>
                </p>
                <p>报表</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>
                    <i class="layui-icon">&#xe645;</i>
                    <small>4</small>
                </p>
                <p>通知</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p><i class="layui-icon">&#xe614;</i>
                 </p>
                <p>设置</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p><i class="layui-icon">&#xe607;</i>
                  </p>
                <p>帮助</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p><i class="layui-icon">&#xe631;</i>
                    </p>
                <p>快捷键</p>
            </a>
        </li>
    </ul>
</div>

<div class="main">
    <div class="container">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
                <li>商品管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-btn-group">
                    <button class="layui-btn">增加</button>
                    <button class="layui-btn ">编辑</button>
                    <button class="layui-btn">删除</button>
                </div>
                <div class="layui-tab-item layui-show">
                    <div class="layui-form">
                        <table class="layui-table">
                            <colgroup>
                                <col width="50">
                                <col width="150">
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
                                <th>人物</th>
                                <th>民族</th>
                                <th>出场时间</th>
                                <th>格言</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>贤心</td>
                                <td>汉族</td>
                                <td>1989-10-14</td>
                                <td>人生似修行</td>
                                <td>
                                    <div class="layui-btn-group">
                                        <button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button>
                                        <button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button>
                                        <button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>张爱玲</td>
                                <td>汉族</td>
                                <td>1920-09-30</td>
                                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>Helen Keller</td>
                                <td>拉丁美裔</td>
                                <td>1880-06-27</td>
                                <td> Life is either a daring adventure or nothing.</td>
                                <td> Life is either a daring adventure or nothing.</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>岳飞</td>
                                <td>汉族</td>
                                <td>1103-北宋崇宁二年</td>
                                <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
                                <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>孟子</td>
                                <td>华夏族（汉族）</td>
                                <td>公元前-372年</td>
                                <td>猿强，则国强。国强，则猿更强！ </td>
                                <td>猿强，则国强。国强，则猿更强！ </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form">
                        <table class="layui-table">
                            <colgroup>
                                <col width="50">
                                <col width="150">
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
                                <th>人物</th>
                                <th>民族</th>
                                <th>出场时间</th>
                                <th>格言</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>贤心</td>
                                <td>汉族</td>
                                <td>1989-10-14</td>
                                <td>人生似修行</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>张爱玲</td>
                                <td>汉族</td>
                                <td>1920-09-30</td>
                                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>Helen Keller</td>
                                <td>拉丁美裔</td>
                                <td>1880-06-27</td>
                                <td> Life is either a daring adventure or nothing.</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>岳飞</td>
                                <td>汉族</td>
                                <td>1103-北宋崇宁二年</td>
                                <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="" lay-skin="primary"></td>
                                <td>孟子</td>
                                <td>华夏族（汉族）</td>
                                <td>公元前-372年</td>
                                <td>猿强，则国强。国强，则猿更强！ </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="demo2"></div>
                </div>
                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div>
            </div>
        </div>
    </div>

</div>
</div>
<script>
    layui.use('element', function(){
        var $ = layui.jquery
                ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };
        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
</script>
<script>
    layui.use('form', function(){
        var $ = layui.jquery, form = layui.form();
        //全选
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

    });
</script>

<script>
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
                ,layer = layui.layer;

        laypage({
            cont: 'demo2'
            ,pages: 100
            ,skin: '#1E9FFF'
        });
        //将一段数组分页展示
        //测试数据
        var data = [
            '北京',
            '上海',
            '广州',
            '深圳',
            '杭州',
            '长沙',
            '合肥',
            '宁夏',
            '成都',
            '西安',
            '南昌',
            '上饶',
            '沈阳',
            '济南',
            '厦门',
            '福州',
            '九江',
            '宜春',
            '赣州',
            '宁波',
            '绍兴',
            '无锡',
            '苏州',
            '徐州',
            '东莞',
            '佛山',
            '中山',
            '成都',
            '武汉',
            '青岛',
            '天津',
            '重庆',
            '南京',
            '九江',
            '香港',
            '澳门',
            '台北'
        ];
        var nums = 5; //每页出现的数据量
        //模拟渲染
        var render = function(curr){
            //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
            var str = '', last = curr*nums - 1;
            last = last >= data.length ? (data.length-1) : last;
            for(var i = (curr*nums - nums); i <= last; i++){
                str += '<li>'+ data[i] +'</li>';
            }
            return str;
        };
    });
</script>
</body>
</html>